<template>
  <view class="related-content">
    <view class="top-block view-block">
      <uni-section title="生产看板" type="line" titleColor=" #102C59" titleFontSize="32rpx"></uni-section>

      <view class="board">
        <view class="l-bg">
          <image class="icon" src="/static/images/monitor/jbz/fl.png" mode="widthFix"></image>
          <text class="lab">生产方量</text>
          <text class="val">{{ broadObj.prodMete }}方</text>
        </view>
        <view class="l-bg">
          <image class="icon" src="/static/images/monitor/jbz/ps.png" mode=""></image>
          <text class="lab">生产盘数</text>
          <text class="val">{{ broadObj.pieCnt }}盘</text>
        </view>
        <view class="l-bg">
          <image class="icon" src="/static/images/monitor/jbz/chc.png" mode=""></image>
          <text class="lab">运输车次</text>
          <text class="val">{{ broadObj.totVehs }}次</text>
        </view>
      </view>
    </view>

    <view class="view-block">
      <uni-section title="原材料消耗统计" type="line" titleColor=" #102C59" titleFontSize="32rpx">
        <template #right>
          <uni-datetime-picker class="picker-sty" v-model="yclDate" type="daterange" @change="getConsumption" />
        </template>
      </uni-section>
      <view class="chart-box">
        <bar-chart chart-ref="chartBarRef" :chart-data="chartBarData" :showBackground="true"></bar-chart>
      </view>
    </view>

    <view class="view-block-line">
      <uni-section title="生产方量统计" type="line" titleColor=" #102C59" titleFontSize="32rpx">
        <template #right>
          <uni-datetime-picker class="picker-sty" v-model="flDate" type="daterange" @change="getProduction" />
        </template>
      </uni-section>
      <view class="chart-box">
        <line-chart chart-ref="chartRef" :chart-data="chartData" :dataZoom="true" :interval="0" grid-right="8%"></line-chart>
      </view>
    </view>

    <view class="view-block">
      <uni-section title="生产数据" type="line" titleColor=" #102C59" titleFontSize="32rpx"></uni-section>

      <scroll-view
        class="scroll-Y"
        scroll-y="true"
        refresher-background="#eee"
        :refresher-enabled="false"
        :refresher-triggered="triggered"
        :scroll-top="scrollTop"
        @scrolltolower="loadMoreData"
      >
        <view class="s-list">
          <view class="s-item" v-for="(item, index) in dataList" :key="item.id + '_' + index" @click="scsjDetail(item.id)">
            <text class="num">{{ index + 1 }}</text>
            <view class="top">
              <view class="title">{{ item.dataIp == '192.168.3.41' ? '1#搅拌站' : item.dataIp == '192.168.3.42' ? '2#搅拌站' : '' }}</view>
              <view class="more">更多>></view>
            </view>
            <view class="bottom">
              <view class="bottom-l">
                <text class="lab">生产方量：</text>
                <text class="val">{{ item.prodMete }}方</text>
              </view>
              <view class="bottom-l">
                <text class="lab">生产时间：</text>
                <text class="val">{{ item.datTim }}</text>
              </view>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
import { getProductionInfo, getMaterialConsumption, getProductionStatistics, getCarInfo } from '@/api/monitorCenter/index.js';
export default {
  data() {
    return {
      yclDate: null,
      flDate: null,
      chartData: {
        legendData: ['生产方量'],
        dataX: [],
        dataY: [],
        colorList: [
          {
            line: 'rgba(4, 197, 76, 1)',
            area0: 'rgba(4, 197, 76, 0.5)',
            area1: 'rgba(4, 197, 76, 0)'
          }
        ]
      },
      chartBarData: {
        legendData: [],
        dataX: [],
        dataY: []
      },
      broadObj: {},

      scrollTop: 0,
      triggered: false,
      hasMore: true,
      queryParams: {
        pageNum: 1,
        pageSize: 10
      },
      dataList: [],
      total: 0
    };
  },
  created() {
    this.getBoradData();
    this.getConsumption();
    this.getProduction();
    this.getDataList();
  },
  mounted() {},
  methods: {
    getBoradData() {
      getProductionInfo('').then((res) => {
        this.broadObj = res.data;
      });
    },
    getConsumption(e) {
      this.yclDate = e || [];
      let params = {
        startTime: this.yclDate.length ? this.yclDate[0] : null,
        endTime: this.yclDate.length ? this.yclDate[1] : null
      };
      getMaterialConsumption(params).then((res) => {
        if (res.data) {
          const [tempX, tempY] = res.data.reduce(
            (acc, { name, value }) => {
              acc[0].push(name);
              acc[1].push(value);
              return acc;
            },
            [[], []]
          );

          this.chartBarData.dataX = tempX;
          this.chartBarData.dataY = [tempY];
        }
      });
    },
    getProduction(e) {
      this.flDate = e || [];
      let params = {
        startTime: this.flDate.length ? this.flDate[0] : null,
        endTime: this.flDate.length ? this.flDate[1] : null
      };
      getProductionStatistics(params).then((res) => {
        if (res.data) {
          const [tempX, tempY] = res.data.reduce(
            (acc, { name, value }) => {
              acc[0].push(name);
              acc[1].push(value);
              return acc;
            },
            [[], []]
          );

          this.chartData.dataX = tempX;
          this.chartData.dataY = [tempY];
        }
      });
    },

    getDataList() {
      let params = { ...this.queryParams };
      getCarInfo(params)
        .then((res) => {
          if (res.code == 200) {
            this.dataList.push(...res.rows);
            this.total = res.total;
            this.hasMore = this.dataList.length < this.total;
          }
          this.triggered = false;
        })
        .catch((err) => {
          this.triggered = false;
        });
    },
    refreshData() {
      if (this.triggered) {
        return;
      }
      this.scrollTop = 0;
      this.triggered = true;
      this.queryParams.pageNum = 1;
      this.hasMore = true;
      this.dataList = [];
      this.getDataList();
    },
    loadMoreData() {
      if (this.triggered || !this.hasMore) {
        return;
      }
      this.queryParams.pageNum++;
      this.getDataList();
    },
    scsjDetail(id) {
      this.$tab.navigateTo(`/pages/monitor/scdetail?id=${id}`);
    }
  }
};
</script>

<style lang="scss" scoped>
.related-content {
  overflow-y: auto;
  
  .top-block {
    // box-shadow: 0rpx -15rpx 21rpx -5rpx rgba(0, 0, 0, 0.25);
    border-radius: 20rpx 20rpx 0rpx 0rpx;
  }

  .view-block {
    background: #fff;
    padding: 20rpx 30rpx;
    margin-bottom: 40rpx;
  }

  .view-block-line {
    background: #fff;
    padding: 20rpx 0;
    margin-bottom: 40rpx;

    .uni-section {
      padding: 0 30rpx;
    }
  }

  .scroll-Y {
    height: calc(100vh - 280rpx);
  }

  .board {
    display: flex;
    justify-content: space-between;
    padding-bottom: 22rpx;

    .l-bg {
      width: 210rpx;
      height: 268rpx;
      background: url('/static/images/monitor/jbz/kb-bg.png') no-repeat;
      background-size: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      padding: 30rpx 0;

      .icon {
        width: 96rpx;
        height: 96rpx;
      }

      .lab {
        font-weight: 500;
        font-size: 32rpx;
        color: #000000;
      }
      .val {
        font-family: 快看世界体, 快看世界体;
        font-weight: 400;
        font-size: 32rpx;
        color: #000000;
      }
    }
  }

  .chart-box {
    width: 100%;
    height: 487rpx;
  }

  .picker-sty {
    width: 250rpx;
  }

  .s-list {
    display: flex;
    flex-direction: column;

    .s-item {
      width: 100%;
      height: 144rpx;
      background: url('/static/images/monitor/jbz/sc-bg.png') no-repeat;
      background-size: 100%;
      margin: 15rpx 0;
      padding: 20rpx 18rpx 20rpx 26rpx;
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .num {
        position: absolute;
        top: 3rpx;
        left: 6rpx;
        font-size: 16rpx;
        color: #ffffff;
      }
      .top {
        display: flex;
        justify-content: space-between;
        .title {
          font-size: 32rpx;
          color: #102c59;
        }
        .more {
          font-size: 20rpx;
          color: rgba(16, 44, 89, 0.5);
        }
      }

      .bottom {
        display: flex;
        justify-content: space-between;
        .lab {
          font-size: 24rpx;
          color: rgba(16, 44, 89, 0.5);
        }
        .val {
          font-size: 24rpx;
          color: #102c59;
        }
      }
    }
  }
  .picker-sty {
    width: 380rpx;
  }
}
::v-deep .uni-section .uni-section-header {
  padding: 0 0 20rpx 0;
}
::v-deep .uni-date-x--border {
  border-color: rgba(0, 0, 0, 0.3);
}

::v-deep .uni-date__x-input,
::v-deep .uni-date-x .range-separator {
  height: 42rpx;
  line-height: 42rpx;
  font-size: 24rpx;
  padding-left: 0;
}
</style>
